<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.5/vue.min.js"></script>
    <link rel="stylesheet" href="./转盘.css">
</head>


<body>
    <div id="app">
        <div class="wrapper_box">
            <div class="wrapper" ref="wrapper" :style="{transform:`rotate(${value}deg)`}">
                <div class="wrap_left">
                    <div>
                        <span class="txt">一等奖</span>
                    </div>
                    <div>
                        <div class="txt">二等奖</div>
                    </div>
                    <div>
                        <div class="txt">三等奖</div>
                    </div>
                    <div>
                        <div class="txt">四等奖</div>
                    </div>
                </div>
                <div class="wrap_right">
                    <div>
                        <span class="txt_right">谢谢惠顾</span>
                    </div>
                    <div>
                        <span class="txt_right">七等奖</span>
                    </div>
                    <div>
                        <span class="txt_right">六等奖</span>
                    </div>
                    <div>
                        <span class="txt_right">五等奖</span>
                    </div>
                </div>
            </div>
            <div class="pointer" @click="click">
                <img src="./pointer.png" alt="">
            </div>
        </div>

    </div>
</body>


<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                start: true,  //控制计时器叠加计时
                value: 0,
                array: [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 1]
            }
        },
        methods: {
            click() {
                let random = this.array[Math.floor(Math.random() * 8)]
                // console.log(this.start);
                if (this.start == true) {
                    this.run(random)
                }
            },
            run(random) {
                this.start = false;
                let a = '';
                if (random != 0) {
                    a = (random - 1) * 45 + 22.5 + 3600
                }
                if (random == 0) {
                    a = 22.5 + 3600
                }
                console.log(random + '-' + a);
                let b = 0
                let timer = setInterval(() => {
                    if (b >= a) {
                        clearInterval(timer)
                        this.start = true
                        if (random == 8) {
                            alert('谢谢惠顾')
                        }
                    }
                    this.$refs.wrapper.style.transform = `rotate(${b}deg)`
                    b += Math.ceil(a - b) * 0.02
                }, 10);
            }
        }
    })
</script>

</html>